<!--销售单据-->
<template>
  <div>
    <el-container>
      <el-header>
        <!-- <el-button class="float-left btn" type="primary" round>导出</el-button> -->
        <el-button class="float-right btn search-btn" type="primary" round>查询</el-button>
        <!-- 搜索按钮 -->
        <el-date-picker class="dataTime float-right" v-model="dataTime" type="datetimerange" :picker-options="pickerOptions2" range-separator="|"
          start-placeholder="2018-3-13 0:00:00" end-placeholder="2018-3-13 24:00:00" align="right">

        </el-date-picker>
        <!-- 时间选择器 -->
        <el-input class="ordersn-input float-right" v-model="ordersn" size="mini" style="width:131px;" :placeholder="lang._436"></el-input>
        <!-- 流水号 -->

        <!-- 全部支付方式 -->
        <el-select class="select-input float-right" v-model="value" :placeholder="lang._437" style="width:131px;border-radius:14px 0 0 14px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- 全部收银员 -->
      </el-header>
      <!-- 顶部栏 -->
      <el-main>
        <el-table class="text-center tables" :data="tableData" stripe header-cell-style="color:#409eff">
          <el-table-column prop="uid" :label="lang._045" width="40">
          </el-table-column>
          <el-table-column prop="goodsName" :label="lang._047" width="247">
          </el-table-column>
          <el-table-column prop="barcode" :label="lang._049" width="110">
          </el-table-column>
          <el-table-column prop="goodsNumber" :label="lang._407" width="120">
          </el-table-column>
          <el-table-column prop="orderTime" :label="lang._438" width="145">
          </el-table-column>
          <el-table-column prop="goodsSheetType" :label="lang._439" width="65">
          </el-table-column>
          <el-table-column prop="Shipments" :label="lang._411" width="197">
          </el-table-column>
          <el-table-column prop="stockShop" :label="lang._412" width="197">
          </el-table-column>
          <el-table-column prop="cargoFlow" :label="lang._414" width="50">
          </el-table-column>
          <el-table-column prop="unit" :label="lang._423" width="50">
          </el-table-column>
          <el-table-column prop="price" :label="lang._440" width="80">
          </el-table-column>
          <el-table-column prop="subtotal" :label="lang._425" width="80">
          </el-table-column>
          <el-table-column prop="status" :label="lang._102" width="227">
          </el-table-column>
          <el-table-column prop="remark" :label="lang._27">
          </el-table-column>
        </el-table>
      </el-main>
      <!-- 中间主要内容 -->
    </el-container>
  </div>
</template>
<style>
  .el-date-editor .el-range-input {
    float: left;
    color: #409eff;
    width: calc(50% - 15px);
  }

  .el-date-editor .el-range-separator {
    float: left;
    color: #409eff;
  }

  .el-date-editor .el-range__icon {
    display: none;
  }

  .ordersn-input {
    height: 28px;
    border: 1px solid #409eff;
    border-right: none;
  }

  .el-input__inner {
    border: none;
    border-radius: 0;
    height: 28px;
    line-height: 28px;
  }

  .select-input {
    height: 28px;
    line-height: 28px;
    border: 1px solid #409eff;
    border-right: none;
    margin-top: 15px;
    overflow: hidden;
  }

  .el-table th {
    text-align: center !important;
  }

  .el-table th,
  .el-table tr {
    background-color: unset;
  }

  .el-table tr {
    background: #edf5ff;
  }

  .el-table__row {
    background: unset !important;
  }

</style>

<style scoped>
  .el-input__inner {
    border: 1px solid red;
  }

  .el-header,
  .el-footer {
    background-color: #FFF;
    color: #333;
    text-align: center;
    height: 60px;
    /* line-height: 60px; */
  }

  .el-footer {
    height: 120px !important;
  }

  .el-main {
    color: #333;
    text-align: center;
    /* line-height: 160px; */
    height: calc(100vh - 120px - 80px - 60px);
    background-color: #f3f4f5;
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }


  .el-input {
    margin: 0;
    padding: 0
  }

</style>
<style lang="less" scoped>
  .el-header {
    .btn {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-top: 15px;
      margin-right: 20px;
    }
    .search-btn {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-top: 15px;
      border-radius: 0 14px 14px 0;
      margin-right: 20px;
      margin-left: 0;
    }
    .dataTime {
      border: 1px solid #409eff;
      color: #409eff;
      border-radius: 0 0 0 0;
      height: 30px;
      padding: 0;
      margin: 0;
      margin-top: 15px;
      overflow: hidden;
    }
    .ordersn-input {
      width: 150px;
      padding: 0;

      margin-top: 15px;
      input {
        border: unset;
      }
    }
  }

  .el-footer {
    padding-right: 0;
    p {
      margin: 0;
      padding: 0;
      line-height: 60px;
      width: 50%;
      text-align: left;
      span {
        color: #409eff;
      }
    }
    .backgroundBlue {
      background: #409eff;
      p {
        margin-left: 20px;
        padding: 0;
        line-height: 60px;
        width: calc(50% - 20px);
        text-align: left;
        color: #FFF;
      }
      span {
        margin-right: 20px;
        padding: 0;
        line-height: 60px;
        width: calc(50% - 20px);
        float: right;
        text-align: right;
        color: #FFF;
      }
    }
  }

</style>



<script>
  export default {
    props: ['lang'],
    data() {
      return {
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        dataTime: '',
        //时间选择器
        ordersn: "",
        //流水号

        tableData: [{
            uid: '1',
            goodsName: '商品名称xXXXXX',
            barcode: '12345678',
            goodsNumber: '2018091206',
            orderTime: '2017-12-31 12:31:00',
            goodsSheetType: '进货单',
            Shipments: 'Tast Of Blue',
            stockShop: '',
            cargoFlow: '1',
            unit: 'kg',
            price: '123.00',
            subtotal: '123.00',
            status: '待确认进货',
            remark: '加急'
        },{
            uid: '1',
            goodsName: '商品名称xXXXXX',
            barcode: '12345678',
            goodsNumber: '2018091206',
            orderTime: '2017-12-31 12:31:00',
            goodsSheetType: '进货单',
            Shipments: 'Tast Of Blue',
            stockShop: '',
            cargoFlow: '1',
            unit: 'kg',
            price: '123.00',
            subtotal: '123.00',
            status: '待确认进货',
            remark: '加急'
        },{
            uid: '1',
            goodsName: '商品名称xXXXXX',
            barcode: '12345678',
            goodsNumber: '2018091206',
            orderTime: '2017-12-31 12:31:00',
            goodsSheetType: '进货单',
            Shipments: 'Tast Of Blue',
            stockShop: '',
            cargoFlow: '1',
            unit: 'kg',
            price: '123.00',
            subtotal: '123.00',
            status: '待确认进货',
            remark: '加急'
        },{
            uid: '1',
            goodsName: '商品名称xXXXXX',
            barcode: '12345678',
            goodsNumber: '2018091206',
            orderTime: '2017-12-31 12:31:00',
            goodsSheetType: '进货单',
            Shipments: 'Tast Of Blue',
            stockShop: '',
            cargoFlow: '1',
            unit: 'kg',
            price: '123.00',
            subtotal: '123.00',
            status: '待确认进货',
            remark: '加急'
        },]

        //表格数据
      }
    }
  }

</script>
